<template>
    <div>
        <div v-title>申请提现</div>
        <div style="height:10px"></div>
        <ul class="ApplyBOX">
            <li class="bankList balance">
                <span>到账银行卡</span>
                <span>{{BankName}}({{CardNumber}})</span>
            </li>
            <li class="fieldInput">
                <p>金额(元)</p>
                <van-cell-group>
                    <van-field v-model="ApplyAmount" placeholder="请输入大于100的金额" />
                </van-cell-group>
                <hr>
            </li>
            <li class="balance bottomSpan">
                <span>可转出余额(元)：{{memberData.CashBalance}}</span>
                <span @click="allCheck">全部提现</span>
            </li>
        </ul>
        <p class="TextTip">温馨提示：提现时间为工作日，到账时间以银行时间为准</p>
        <van-button type="primary" class="buttomStyle" @click="ApplyEvent" v-show="!ShowBT">确认提现</van-button>
        <van-button type="primary" class="buttomStyle" v-show="ShowBT">正在提现...</van-button>
        <p class="bottom" @click="PresentRecord">提现记录</p>
    </div>
</template>
<script>
import {
    Field,
    Button,
    Toast,
    CellGroup
} from 'vant';
import api from '../fetch/api.js'
export default {
    components: {
        [Field.name]: Field,
        [Button.name]: Button,
        [Toast.name]: Toast,
        [CellGroup.name]: CellGroup
    },
    data() {
        return {
            value: '',
            bankData: '',
            ApplyAmount: '',
            memberData: '',
            ShowBT: false,
            CardNumber: '',
            BankName: ''
        }
    },
    watch: {
        'ApplyAmount'() {
            if (this.memberData.CashBalance < this.ApplyAmount) {
                Toast('提现金额不足，请输入正确的金额');
            }
        }
    },
    created() {
        this.bankModel();
        api.Post('Member/Login/GetModel').then(res => {
            this.memberData = res;
        })
    },
    methods: {
        bankModel() {
            api.Post('Member/MemberInfo/GetBankCard').then(res => {
                this.CardNumber = res.CardNumber.substring(res.CardNumber.length - 3, res.CardNumber);
                this.BankName = res.BankName
            })
        },
        allCheck() {
            this.ApplyAmount = this.memberData.CashBalance
        },
        ApplyEvent() {
            if (this.ApplyAmount == '') {
                Toast('请输入提现金额');
                return
            }
            if (this.ApplyAmount < 100) {
                Toast('提现金额需大于100');
                return
            }
            this.ShowBT = true;
            api.Post('Member/MemberInfo/ApplyWithdrawal', { ApplyAmount: this.ApplyAmount }).then(res => {
                if (res.Success) {
                    Toast(res.Msg)
                    this.ApplyAmount = ''
                    api.Post('Member/Login/GetModel').then(res => {
                        this.memberData = res;
                    })
                    this.ShowBT = false
                } else {
                    setTimeout(() => {
                        Toast(res.Msg)
                        this.ShowBT = false
                    }, 2000);
                }
            })
        },
        PresentRecord() {
            this.$router.push('/PresentRecord')
        }
    }
}
</script>
<style scoped>
.ApplyBOX {
    width: 92%;
    margin: 10px auto;
    background: #fff !important;
    border-radius: 10px;
    overflow: hidden;
    height: 193px;
    color: #333;
    font-size: 14px;
    box-shadow: 5px 5px 5px #999999;
    margin-top: 0px;
}

.ApplyBOX .bankList {
    background: #eeeeee;
}

.ApplyBOX .bankList span:last-child {
    float: right
}

.ApplyBOX .fieldInput {
    padding: 0 3%
}

.ApplyBOX hr {
    height: 1px;
    border: none;
    border-top: 1px solid #eeeeee;
    margin: 0
}

.ApplyBOX .balance {
    height: 50px;
    line-height: 50px;
    padding: 0 3%;
}

.ApplyBOX .bottomSpan span:last-child {
    float: right;
    color: #2491ff
}

.buttomStyle {
    width: 92%;
    background: #2491ff;
    border: 1px solid #2491ff;
    margin: 20px auto 10px auto;
    display: block;
    font-size: 16px;
}

.TextTip {
    width: 90%;
    margin: 0 auto;
    color: #999999;
    font-size: 12px;
    text-align: center;
}

.bottom {
    font-size: 14px;
    color: #333333;
    text-align: center;
    width: 30%;
    height: 30px;
    line-height: 30px;
    margin: 20px auto;
}
</style>
<style>
.ApplyBOX .van-hairline--top-bottom::after,
.van-hairline::after {
    border-bottom: none;
    border-width: 0;
}

.ApplyBOX .van-cell__value input {
    font-size: 18px;
    font-weight: 600
}

.ApplyBOX input::-webkit-input-placeholder {
    color: #cccccc;
}

.ApplyBOX input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #cccccc;
}

.ApplyBOX input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #cccccc;
}

.ApplyBOX input:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #cccccc;
}
</style>